<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title></title>
		<style type="text/css">
			#container {
				/*地图(容器)显示大小*/
				width: 100%;
				height: 400px;
			}
		</style>

	</head>
	<!-- 页面载入后，调用init函数 -->
	<body onload="">
		<!-- 定义地图显示容器 -->
		<div id="container"></div>
		<div id="dianji" style="font-size: 100px;">点击</div>
		<div id="mapList"></div>
		
		<style>
			.box{
				border-bottom: 1px solid rgba(0,0,0,.1);
				padding: 10px;
			}
			.title{
				font-size: 14px;
				font-weight: bold;
			}
			.address{
				font-size: 12px;
				color: rgba(0,0,0,.4);
			}
		</style>
		<div class="box">
			<div class="title">滨城区档案局</div>
			<div style="" class="address">山东省滨州市滨城区渤海四路</div>
		</div>
		
	</body>
	<!-- 引入和uniapp互通的js -->
	<script type="text/javascript" src="./js/uni-webview-js.js"></script>
	<script type="text/javascript" src="./js/axios.min.js"></script>
	<!--引入Javascript API GL，参数说明参见下文-->
	<script charset="utf-8" type="text/javascript"
		src="https://map.qq.com/api/gljs?v=2.exp&libraries=service&key=GY3BZ-3ZL6L-VHBPM-E4M7W-3NT3F-CTF5U"></script>
	<script>
		let apiUrl = 'https://apis.map.qq.com'
		let key = 'GY3BZ-3ZL6L-VHBPM-E4M7W-3NT3F-CTF5U'
		let uniappData = {}
		// 创建axios实例
		const instance = axios.create({
		  // 设置基础URL
		  baseURL: apiUrl,
		  // 设置超时时间
		  timeout: 1000,
		  // 允许跨域请求
		  withCredentials: true, // 如果服务器需要cookie等认证信息，设置为true
		});
		
		// 储存展示列表
		let pois  = []
		// 获取当前地理位置
		axios.get(apiUrl + '/ws/location/v1/ip?key=GY3BZ-3ZL6L-VHBPM-E4M7W-3NT3F-CTF5U')
		  .then(function (response) {
		    // 处理成功情况  之后渲染地图
			initMap(response.data.result,response.data.result.location)
  
		  })
		  .catch(function (error) {
		    // 处理错误情况  重新获取位置 
		    console.log(error);
		  })
		  
		  //定义地图中心点坐标
		  let center = null
		  //定义map变量，调用 TMap.Map() 构造函数创建地图
		  let map = null
		  // MultiMarker 标记点
		  let marker = null
		  //初始化marker图层
		  let markerLayer = null
		  // 新建一个正逆地址解析类
		  let geocoder = null
		//地图初始化函数，本例取名为init，开发者可根据实际情况定义
		
		// 地图初始化
		function initMap(result,location) {
			//定义地图中心点坐标
			center = new TMap.LatLng(location.lat, location.lng)
			//定义map变量，调用 TMap.Map() 构造函数创建地图
			map = new TMap.Map(document.getElementById('container'), {
				center: center, //设置地图中心点坐标
				zoom: 17.2, //设置地图缩放级别
				pitch: 43.5, //设置俯仰角
				rotation: 45 //设置地图旋转角度
			});
			// MultiMarker文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocMarker
			marker = new TMap.MultiMarker({
				map: map,
				styles: {
					// 点标记样式
					marker: new TMap.MarkerStyle({
						width: 20, // 样式宽
						height: 30, // 样式高
						anchor: {
							x: 10,
							y: 30
						}, // 描点位置
					}),
				},
				geometries: [
					// 点标记数据数组
					{
						// 标记位置(纬度，经度，高度)
						position: center,
						id: '0',
					},
				],
			});
			//初始化marker图层
		    markerLayer = new TMap.MultiMarker({
		        map: map,
		    });
			geocoder = new TMap.service.Geocoder();
			// 获取展示的pois
			axios.get(apiUrl + '/ws/geocoder/v1/?location=' + location.lat + ',' + location.lng + '&key=' + key + '&get_poi=1').then(res => {
				pois = res.data.result.pois
				let divStr = ''
				// js进行渲染
				for(let i = 0;i<pois.length;i++){
					divStr += `
						<div class="box" onclick="poisClick(${i})">
							<div class="title">${pois[i].title}</div>
							<div style="" class="address">${pois[i].address}</div>
						</div>
					`
				}
				// 渲染到那个html上
				document.getElementById('mapList').innerHTML = divStr
			})
					
			//监听点击事件添加marker移除marker
			map.on("click", (evt) => {
				//移除marker事件
				removeMarker()
				//添加marker事件
				mapadd(evt)
			});
		}
		
		
		//移除marker事件
		function removeMarker() {
			uniappData = {}
			marker.setMap(null)
			markerLayer.setGeometries([])
		}
		//添加marker事件
		function mapadd(evt){
			// 将给定的坐标位置转换为地址
			geocoder.getAddress({ location: evt.latLng }).then((result) => {
				uniappData = result.result
			});
			markerLayer.add({
				position: evt.latLng,
			}); 
			map.destroy()
			initMap({},evt.latLng)
		}
		// 点击 pois事件  添加 marker 移除marker
		function poisClick(i){
			let latLng = {
				lat:pois[i].location.lat,
				lng:pois[i].location.lng,
				height:0
			}
			var location = new TMap.LatLng(pois[i].location.lat, pois[i].location.lng);
			removeMarker()
			mapadd({latLng:location})
			map.destroy()
			initMap({},pois[i].location)
		}


		// 点击按钮和uniapp进行交互
		document.getElementById('dianji').addEventListener("click", function() {
			uni.postMessage({
				data: {
					action: 'message',
					uniappData
				}
			})
		})
	</script>
</html>